<template>
  <div class="aside">
    <!-- 头像 -->
    <div class="top" @click="goUpdateAdmin()">
        <img :src="userInfo.avatar" />  
          <span style="margin-top: 5px;"> -
            <span style="font-family: '楷体';color: aquamarine;">
              {{ userInfo.username }}
              <el-icon color="skyblue" v-if="userInfo.sex == '男'"><Male /></el-icon>
              <el-icon color="pink" v-else><Female /></el-icon>
            </span>
          </span>
      </div>
      <!-- 菜单 -->
    <div class="aside_menu">
        <el-col :span="12">
        <div class="menu_title">后台管理系统</div>
        <el-menu
          active-text-color="#ffd04b"
          background-color="transparent"
          class="el-menu-vertical-demo"
          default-active="1"
          text-color="#fff"
          unique-opened
          router>
          <el-sub-menu :index="'`'+ item.id +'`'" v-for="(item,index) in store.state.menuList" :key="index">
            <template #title>
              <el-icon><component :is='item.icon'></component></el-icon>
              <span>{{ item.name }}</span>
            </template>
              <el-menu-item v-for="(item1,index1) in store.state.menuList[index].children" :key="index1" :index="item1.router">{{ item1.name }}</el-menu-item>
          </el-sub-menu>

          <el-menu-item index="/login">
            <el-icon><Back /></el-icon>
            <span>退出系统</span>
          </el-menu-item>

        </el-menu>
      </el-col>
    </div>
      
  </div>
    
  </template>
      
  <script setup>
  import { ref,getCurrentInstance } from 'vue'
  import { useStore } from "vuex";
  import { useRouter,useRoute } from 'vue-router'
  const router = useRouter()
  const store = useStore()

  const userInfo = ref(store.state.userInfo)
  console.log('管理员信息：',userInfo.value);

  // 权限函数
  const fn = (n)=>{
    if (userInfo.value.role.includes(n)) {
      return true
    }else{
      return false
    }
    // return true
  }
  const goUpdateAdmin = ()=>{
    router.push({
      path:'/admin'
    })
  }

</script>
<style scoped>
  .aside {
    width: 100%;
    /* height: 100%; */
    background: rgba(54, 55, 55, 1);
    text-align: center;
  }
  /* LOGO容器 */
  .top {
    width: 100%;
    height: 120px;
    object-fit: contain;
    box-sizing: border-box;
    border-bottom: 1px solid white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    place-items: center;
    letter-spacing: 1px;
    color: white;
    font-size: 13px;
  }
  /* logo图片 */
  .top>img{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: white;
    /* border: 2px solid white; */
  }
  img:hover {
    box-shadow: 1px 1px 10px rgb(247, 220, 230);
  }
  /* 后台系统 */
  .menu_title{
    margin-top: 10px;
    color: white;
    letter-spacing: 3px;
    font-size: 16px;
    width: 200px;
    padding: 10px 5px 10px 5px;
    cursor:pointer
    /* border: 2px solid white; */
  }
  /* hover的项 */
  .el-menu-vertical-demo{
    width: 200px;
    border: 2px solid white;
    border: none !important;
    background-color: none;
  }
  /* 导航文字提示 */
  .el-menu-item-group {
    text-indent: 0px;
    text-align: left !important;
  }
  </style>
      